import React from 'react';
import classnames from 'classnames';
import { WeaLeftRightLayout } from 'ecCom';
import LeftTree from './LeftTree';
import { observer, inject } from 'mobx-react';
import { TreeStoreProps, TreeStore } from '../../stores/tree';
import CardStore from '../../stores/card';
import { listStore } from '../../stores/list';
import ReplyStore from '../../stores/reply';
import _ from 'lodash';
import { CustomPageStore } from '../../stores/custompage';
import { toJS } from 'mobx';
import { UrlDocker } from '..';
export interface TreeProps {
    className?: string;
    Tree: TreeStoreProps;
    Card: CardStore;
    Search: listStore;
    reply: ReplyStore;
    customPageStore: CustomPageStore;
    location?: any;
}

@inject('Tree', 'Card', 'Search', 'reply', "customPageStore")
@observer
export default class Tree extends React.Component<TreeProps, any>{
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        //-------------------针对树  工具栏  功能
        const { location, Tree } = this.props;
        if (location && location.query && location.query.defaultHideLeft) {
            Tree.setDefaultHideLeft(location.query.defaultHideLeft == '1')
        }
    }
    _iframe: any;
    leftTreeRef: any = React.createRef();
    afterIframeLoad = () => {
        const { Tree } = this.props;
        Tree.changeLoading();

    }
    handleLoadData = (pid,node, callback) => {
        const { Tree } = this.props;
        Tree.currentNodeData=node;
        Tree.getTreeData({ pid }, false, callback);
    }
    handleNodeClick = (pid,node) => {
        const { Tree } = this.props;
        if (pid == '0_0') {
            if (Tree.defaultAdress) {
                Tree.onLoadRight({ href: Tree.defaultAdress });
            } else {
                Tree.isCube = false;
                Tree.remarkRefVisible = true;
            }
        } else {
            let hrmtype;
            if(node.data&&node.data.hrmtype){
                hrmtype=node.data.hrmtype;
            }
            Tree.getTreeHref({ pid },hrmtype);
            //Tree.remarkRefVisible = false;
        }
    }
    componentWillUnmount() {
        const { Tree } = this.props;
        Tree.clear();
    }
    render() {
        const { className, Tree, location } = this.props;
        const classNames = classnames('coms-mode-tree', className);
        if (Tree.windowTitle != '') {
            document.title = Tree.windowTitle;
        }
        let searchParamStr = "";
        if (location && location.query) {
            const { query } = location;
            _.keys(query).forEach(item => {
                if (item.startsWith("con_") || item == 'quickSearchValue' || item == 'fromToolBar' || item == 'datasqlwhere'
                || item == 'treehavekeyword') {
                    searchParamStr += "&" + item + "=" + query[item];
                }
            });
            
        }
        const { showLeft = true } = Tree;
        return (
            <div className={classNames}>
                <WeaLeftRightLayout
                    leftCom={
                        Tree.isInit ? <LeftTree
                            ref={this.setRef}
                            key={showLeft} 	//针对组件内leftCom默认隐藏时，打开时不渲染导致tab渲染出错的问题
                            datas={toJS(Tree.datas)}
                            topName={Tree.treeName}
                            loadData={this.handleLoadData}
                            onSelect={this.handleNodeClick}
                            expandFirstNode={Tree.expandFirstNode}
                            hasQuickSearch={Tree.hasQuickSearch}
                            onQuickSearch={Tree.quickSearch}
                            combintree={Tree.combintree}
                            combintreeway={Tree.combintreeway}
                            currentTree={Tree.currentTree}
                            onChangeTree={Tree.onChangeTree}
                            expandedKeys={Tree.expandKeys.slice()}
                            selectedKeys = {Tree.selectedNodeKeys.slice()}
                            onExpandChange={this.onExpandChange}
                        /> : null
                    }
                    resize={true}
                    showLeft={showLeft}
                    leftWidth={Tree.displaywidth}
                    onCollapse={this.onCollapse}
                >
                    <div id="cube-tree-frameMain" className="cube-tree-main-frame"
                         style={{ display: Tree.mainFrameRefVisible ? "block" : 'none' }}>
                        <iframe id="cube-tree-mainFrame"
                                name="cubeTreeMainFrame"
                                frameBorder="no" width="100%" height="100%" scrolling="auto" src="about:blank"/>
                    </div>
                    <div id="cube-tree-remark"
                         style={{ paddingLeft: 15, display: Tree.remarkRefVisible ? "block" : 'none' }}
                         dangerouslySetInnerHTML={{ __html: Tree.treeRemark }}/>
                    <div className="cube-tree-container"
                         style={{ display: Tree.isCube ? 'block' : 'none', height: "100%" }}>
                        {Tree.isCube && <UrlDocker
                            url={Tree.url + searchParamStr || ''}
                            Card={(this.props.Card.isInTree = true, this.props.Card)}
                            Search={(this.props.Search)}
                            Tree={Tree.tree || (Tree.tree = new TreeStore(), Tree.tree.isInTree = true, Tree.tree)}
                            Reply={this.props.reply}
                            ViewCustomPage={this.props.customPageStore}
                        />}
                    </div>
                </WeaLeftRightLayout>
            </div>
        )
    }

    onExpandChange=(expandKeys)=>{
        const { Tree } = this.props;
        Tree.onExpandChange(expandKeys);
    }
    setRef=(ref)=>{
       this.leftTreeRef=ref;
    }
    onCollapse = (bool) => {
        setTimeout(()=>{
            this.leftTreeRef.scrollheigth();
        },10);
        const { Tree } = this.props;
        Tree.setShowLeft(bool);
    }
}

